import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick, advanced, searchItem, resetForm, StartOrStopList, procedureData }) => {
  const onHandleAdvanced = () => {
    if (onClick) {
      onClick();
    }
  };

  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 8
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={5}>
          <FormItem label="表单编码"{...formItemLayout}>
            {getFieldDecorator('formCode', {
              initialValue: searchItem?.formCode || undefined,
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(
              <Input placeholder='请输入表单编码' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="表单名称"{...formItemLayout}>
            {getFieldDecorator('formName', {
              initialValue: searchItem?.formName || undefined,
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(
              <Input placeholder='请输入表单名称' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="适用机型"{...formItemLayout}>
            {getFieldDecorator('model', {
              initialValue: searchItem.model || undefined,
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(
              <Input placeholder='请输入适用机型' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="适用工序"{...formItemLayout}>
            {getFieldDecorator('procedureName', {
              initialValue: searchItem?.procedureName || undefined
            })(
              // <Input placeholder='请输入适用工序' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
              <Select
                placeholder='请选择工序'
                allowClear
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {procedureData && procedureData.map(item => <Option key={item.procedureName}>{item.procedureName}</Option>)}
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button icon="search" type="primary" onClick={() => onSearch(getFieldsValue())}>
              {'查询'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="primary" icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
              {'展开'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="default" icon={'redo'} onClick={() => resetForm()}>
              {'重置'}
            </Button>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        {
          advanced ? <Col span={5}>
            <FormItem label="创建时间"{...formItemLayout}>
              {getFieldDecorator('createTime', {
                initialValue: searchItem?.createTime || undefined
              })(
                <DatePicker allowClear style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col> : ''
        }

        {
          advanced ?
            <Col span={5}>
              <FormItem label="状态"{...formItemLayout}>
                {getFieldDecorator('isDelete', {
                  initialValue: searchItem?.isDelete || undefined
                })(
                  <Select placeholder='请选择状态' allowClear >
                    {
                      StartOrStopList.map(item => {
                        return <Option key={item.id}>{item.value}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
            </Col> : ''
        }
      </Row>

    </Form>
  );
};

export default Form.create()(SearchForm);
